<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>0000</title>
        <style>
            ul,li {
                margin:0;
                padding:0;
            }
            .wrap {
                width:300px;
                height:300px;
                border:1px solid #000;
                border-radius:50%;
                margin:100px auto;
                position:relative;
            }
            #list {
                list-style-type:none;
                position:relative;
                height:300px;
                width:300px;
            }
            .clear {
                content:"";
                display:block;
                clear:both;
            }
            #list li {
                width:3px;
                height:20px;
                background:#000;
                float:left;
                position:absolute;
                left:150px;
                top:0;
                -webkit-transform-origin:center 150px;
            }
            #list li:nth-of-type(5n+1) {
                width:3px;
                height:40px;
            }
            #hour {
                width:6px;
                height:60px;
                background:#000;
                position:absolute;
                left:150px;
                top:90px;
                -webkit-transform-origin:center bottom;
            }
            #min {
                width:4px;
                height:90px;
                background:#999;
                position:absolute;
                left:151px;
                top:60px;
                -webkit-transform-origin:center bottom;
            }
            #sec {
                width:2px;
                height:120px;
                background:red;
                position:absolute;
                left:152px;
                top:30px;
                -webkit-transform-origin:center bottom;
            }
            #origin {
                width:20px;
                height:20px;
                background:#000;
                position:absolute;
                left:143px;
                top:138px;
                border-radius:50%;
            }
            
        </style>
        <script>
            window.onload = function () {
                var oList = document.getElementById("list");
                var aLi = "";
                var oStyle = document.getElementsByTagName("style")[0];
                var aStyle = "";
                var oHour = document.getElementById("hour");
                var oMin = document.getElementById("min");
                var oSec = document.getElementById("sec");
                
                
                for(var i=0; i<60; i++) {
                    aLi += "<li><li>";
                    aStyle += "#list li:nth-of-type("+(i+1)+") { -webkit-transform:rotate("+(i*6)+"deg); } ";
                }
                oList.innerHTML = aLi;
                oStyle.innerHTML += aStyle;
                
                function time() {
                    var oDate = new Date();
                    var iSec = oDate.getSeconds();
                    var iMin = oDate.getMinutes() + iSec/60;
                    var iHour = oDate.getHours() + iMin/60;
                    
                    oSec.style.WebkitTransform = "rotate("+iSec*6+"deg)";
                    oMin.style.WebkitTransform = " rotate( "+ iMin*6 +"deg ) ";
                    oHour.style.WebkitTransform = "rotate("+iHour*30+"deg)";
                }
                time();
                setInterval( function () {
                    time();
                },1000 )
            }
        </script>
    </head>
    <body>
        <!--时钟-->
        <div class="wrap">
            <ul id="list" class="clear">
                
            </ul>
            
            <div    id="hour"></div>
            <div    id="min"></div>
            <div    id="sec"></div>
            <div    id="origin"></div>
        </div>
    </body>
</html>